<template>
  <div class="container">
    <div class="box">
      <span
        class="box_item"
        :onmouseenter="handleEnter"
        v-for="(item, index) in list"
        :key="index"
      >
        <span>{{ item.title }}</span>
        <div class="right_content">{{ innerText }}</div></span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const innerText = ref<string>("");

interface List {
  title: string;
}

//遍历的数据
const list = ref<List[]>([
  {
    title: "今天是个好日子,哈哈哈哈哈哈"
  },
  {
    title: "晚上吃啥呢?"
  },
  {
    title: "明天吃啥呢?"
  },
  {
    title: "明天放假了"
  },
  {
    title: "明天晚上吃啥呢?"
  },
  {
    title: "周末该干啥呢?"
  }
]);

// hover 显示的标题
const handleEnter = (v: any): void => {
  innerText.value = v.target.__vnode.children[0].children;
};
</script>

<style lang="scss" scoped>
.container {
  width: 800px;
  height: 500px;

  .box {
    width: 800px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #9cb068;

    .box_item {
      width: 200px;
      height: 50px;
      background-color: skyblue;
      margin-bottom: 5px;
      text-align: center;
      line-height: 50px;
      position: relative;

      .right_content {
        position: absolute;
        width:100%;
        min-width: 200px;
        max-width: 500px;
        min-height: 50px;
        background-color: rgba(126, 117, 117, 0.5);
        left: 210px;
        top: 0;
        display: none;
      }
      &::before {
        content: "";
        position: absolute;
        left: 190px;
        top: 15px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid rgba(126, 117, 117, 0.5);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        display: none;
      }
      &:hover {
        .right_content {
          display: block;
        }
        &::before {
          display: block;
        }
        background-color: red;
      }
    }
  }
}
</style>
